import {getInterfaceInfoVoByIdUsingGet, invokeInterfaceInfoUsingPost} from '@/services/feiapi/interfaceInfoController';
import { history, useParams } from '@@/exports';
import { PageContainer } from '@ant-design/pro-components';
import {Card, Descriptions, Divider, Form, message, Input, Button} from 'antd';
import { useEffect, useState } from 'react';
import ReactJson from 'react-json-view'

const InterfaceInfoDetail: React.FC = () => {
  const params = useParams();
  const [data, setData] = useState<API.InterfaceInfoVO>();
  const [resultLoading,setResultLoading] = useState(false);
  const [resultData,setResultData] = useState<any>()

  const loadData = async () => {
    const id = Number(params.id);
    if (!id) {
      const urlParams = new URL(window.location.href).searchParams;
      history.push(urlParams.get('redirect') || '/');
      return;
    }
    try {
      const res = await getInterfaceInfoVoByIdUsingGet({
        id: id,
      });
      setData(res.data);
    } catch (e: any) {
      message.error(e.message);
    }
  };

  const onFinish = async (val:any) => {
    setResultLoading(true)

    try {
      const res = await invokeInterfaceInfoUsingPost({
        params:val.userRequestParams,
        ...params
      });
      setResultData(res.data);
    } catch (e: any) {
      message.error(e.message);
    }
    setResultLoading(false);
  }

  useEffect(() => {
    loadData();
  }, []);

  return (
    <PageContainer title={'接口详情'}>
      <Card>
        {data ? (
          <Descriptions layout={'vertical'} column={1}>
            <Descriptions.Item label="接口状态">{data.status===0 ? '开启' : '关闭'}</Descriptions.Item>
            <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
            <Descriptions.Item label="请求地址">{data.host}</Descriptions.Item>
            <Descriptions.Item label="请求路径">{data.route}</Descriptions.Item>
            <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
            <Descriptions.Item label="请求参数">
              <ReactJson src={JSON.parse(data.params ?? '')} />
            </Descriptions.Item>
            <Descriptions.Item label="请求头">
              <ReactJson src={JSON.parse(data.requestHeader ?? '')} />
            </Descriptions.Item>
            <Descriptions.Item label="响应头">
              <ReactJson src={JSON.parse(data.responseHeader ?? '')} />
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">{data.createTime}</Descriptions.Item>
            <Descriptions.Item label="更新时间">{data.updateTime}</Descriptions.Item>
          </Descriptions>
        ) : (
          <>接口不存在</>
        )}
      </Card>
      <Divider />
      <Card title="在线测试">
        <Form name="invoke" layout="vertical" onFinish={onFinish}>
          <Form.Item label="请求参数" name="userRequestParams">
            <Input.TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Divider />
      <Card title={"调用结果"} loading={resultLoading}>
        {resultData}
      </Card>
    </PageContainer>
  );
};

export default InterfaceInfoDetail;
